<template>
    <v-container fluid>
        <v-row justify="center">
            <v-dialog v-model="dialog" fullscreen :scrim="false" transition="dialog-bottom-transition">
                <!-- <template v-slot:activator="{ props }">
                <v-btn color="primary" dark v-bind="props">
                    Open Dialog
                </v-btn>
            </template> -->
                <v-card>
                    <v-toolbar dark color="primary">
                        <v-btn icon dark @click="dialog = false;bookBo={}">
                            <v-icon>mdi-close</v-icon>
                        </v-btn>
                        <v-toolbar-title>{{ bookBo.id == null ? '创建我的单词本' : '编辑单词本' }}</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <v-toolbar-items>
                            <v-btn variant="text" @click="submit">
                                保存
                            </v-btn>
                        </v-toolbar-items>
                    </v-toolbar>
                    <v-form v-model="valid">
                        <v-container>
                            <v-row>
                                <v-text-field v-model="bookBo.title" label="单词本名称" required hide-details />
                            </v-row>
                            <v-row>
                                <p> &nbsp;</p>
                            </v-row>
                            <v-row>
                                <v-select v-model="bookBo.langId" clearable label="选择语种" item-title="lang"
                                    item-value="langId" :items="langList" variant="outlined" />
                            </v-row>
                            <v-row>
                                <v-select clearable chips label="选择标签" item-title="name" item-value="id" :items="labelList"
                                    v-model="bookBo.label" multiple variant="outlined" />
                            </v-row>
                            <v-row>
                                <v-textarea v-model="bookBo.remark" label="备注" required hide-details />
                            </v-row>
                        </v-container>
                    </v-form>
                </v-card>
            </v-dialog>
        </v-row>
    </v-container>
    <v-dialog v-model="circleDialog" width="auto">
        <v-card>
            <v-card-text>
                <v-progress-circular title="处理中" :size="50" style="margin: auto;display: block;" indeterminate color="primary"/>
                <span>处理中</span>
            </v-card-text>
            <v-card-actions v-if="cancelLoadingDialog">
                <v-spacer></v-spacer>
                <v-btn @click="circleDialog=false;cancelLoadingDialog=false" text="关闭" />
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>
<script>
import { langList } from "@/api/lang.js";
import { labelList } from "@/api/label.js";
import { addBook, updateBook } from "@/api/book.js";
export default {
    name: 'AddDictation',
    props:{
        callback:Function
    },
    data() {
        return {
            circleDialog:false,
            dialog: false,
            cancelLoadingDialog:false,
            notifications: false,
            sound: false,
            widgets: false,
            valid: false,
            bookBo: {
                remark: undefined
            },
            langBo: {},
            langList: [],
            labelList: [],
            resultData:{}
        }
    },
    created() {
        this.getSelectData()
    },
    methods: {
        toggle(change) {
            this.dialog = change
            // this.getSelectData()
        },
        getSelectData() {
            langList(this.langBo).then(resp => {
                // console.log(resp);
                this.langList = resp.data
            })
            labelList({}).then(resp => {
                this.labelList = resp.data
                // console.log(resp);
            })
        },
        submit() {
            this.dialog = false
            this.circleDialog=true
            if (this.bookBo.id == null) {
                addBook(this.bookBo).then(resp => {
                    if (resp.code == 1) {
                        this.circleDialog = false
                        this.callback()
                    }
                    this.resultData=resp
                })//.finally(()=>this.circleDialog=false)
            } else {
                updateBook(this.bookBo).then(resp => {
                    if (resp.code == 1){ 
                        this.circleDialog = false
                        this.callback()
                    }
                    this.resultData=resp
                })//.finally(()=>this.circleDialog=false)
            }
            setTimeout(() => {
                if(this.resultData==null||this.resultData.code!=0)
                    this.cancelLoadingDialog=true
                else this.circleDialog=false
                this.resultData={}
                this.callback()
            }, 5000);
        },
        editDiction(book) {
            // console.log('book',book);
            this.bookBo = book
            this.dialog = true
        }
    }
}
</script>

<style scoped>
.dialog-bottom-transition-enter-active,
.dialog-bottom-transition-leave-active {
    transition: transform .2s ease-in-out;
}
</style>